import React, { useState } from "react";
import { 
  Button, Card, Row, Col, Radio, Typography, Steps, Divider, Alert 
} from "antd";
import { 
  LeftOutlined, AlipayOutlined, WechatOutlined, CreditCardOutlined 
} from "@ant-design/icons";
//实际的支付订单界面  
const { Title, Text } = Typography;
const { Step } = Steps;

interface PaymentPageProps {
  isMobile: boolean;
  order: any;
  address: any;
  paymentMethod: string;
  onPay: () => void;
  onBack: () => void;
  onPaymentMethodChange: (method: string) => void;
}

const PaymentPage: React.FC<PaymentPageProps> = ({ 
  isMobile, 
  order,
  address,
  paymentMethod,
  onPay,
  onBack,
  onPaymentMethodChange
}) => {
  const [selectedMethod, setSelectedMethod] = useState(paymentMethod);
  const [isPaying, setIsPaying] = useState(false);
  
  // 处理支付方式变更
  const handlePaymentMethodChange = (e: any) => {
    const newMethod = e.target.value;
    setSelectedMethod(newMethod);
    onPaymentMethodChange(newMethod);
  };
  
  // 处理支付
  const handlePay = () => {
    console.log('开始支付流程，订单信息:', order);
    console.log('选择的支付方式:', selectedMethod);
    setIsPaying(true);
    // 确保在支付前更新支付方式
    onPaymentMethodChange(selectedMethod);
    // 模拟支付过程
    setTimeout(() => {
      console.log('支付完成，调用 onPay');
      setIsPaying(false);
      onPay();
    }, 1000);
  };
  
  // 获取支付方式显示文本
  const getPaymentMethodText = (method: string) => {
    switch (method) {
      case 'alipay':
        return '支付宝';
      case 'wechat':
        return '微信支付';
      case 'bank':
        return '银行卡支付';
      default:
        return '支付宝';
    }
  };
  
  return (
    <div style={{ 
      padding: isMobile ? "8px" : "16px", 
      minHeight: "100vh",
      paddingBottom: isMobile ? "120px" : "140px"
    }}>
      {/* 顶部导航 */}
      <div style={{ 
        display: "flex", 
        alignItems: "center", 
        marginBottom: 16,
        padding: "12px 0"
      }}>
        <Button 
          type="text" 
          icon={<LeftOutlined />} 
          onClick={onBack}
          style={{ marginRight: 8 }}
        />
        <Title level={4} style={{ margin: 0 }}>支付订单</Title>
      </div>
      
      {/* 订单状态步骤 */}
      <Steps
        current={0}
        size="small"
        style={{ marginBottom: 24 }}
      >
        <Step title="提交订单" />
        <Step title="付款" />
        <Step title="完成" />
      </Steps>
      
      {/* 订单信息卡片 */}
      <Card 
        bordered={false}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
        style={{ marginBottom: 16, background: "#f9f9f9" }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <Text type="secondary">订单号</Text>
          <Text strong>{order.id || `${Date.now()}`}</Text>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <Text type="secondary">创建时间</Text>
          <Text>{order.createdAt ? new Date(order.createdAt).toLocaleString() : new Date().toLocaleString()}</Text>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Text type="secondary">实付款</Text>
          <Text strong style={{ fontSize: isMobile ? 18 : 20, color: "#ff4d4f" }}>
            ¥{order.totalAmount !== undefined ? order.totalAmount.toFixed(2) : '0.00'}
          </Text>
        </div>
      </Card>
      
      {/* 收货地址 */}
      <Card 
        title="收货信息" 
        bordered={false}
        headStyle={{ padding: "0 16px", fontWeight: "normal" }}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
        style={{ marginBottom: 16 }}
      >
        <div style={{ marginBottom: 4 }}>
          <Text strong>{address.name}</Text>
          <Text style={{ marginLeft: 12 }}>{address.phone}</Text>
        </div>
        <Text>
          {address.province}{address.city}{address.district}{address.detail}
        </Text>
      </Card>
      
      {/* 支付方式 */}
      <Card 
        title="支付方式" 
        bordered={false}
        headStyle={{ padding: "0 16px", fontWeight: "normal" }}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
        style={{ marginBottom: 24 }}
      >
        <Radio.Group 
          value={selectedMethod} 
          onChange={handlePaymentMethodChange}
          style={{ width: '100%' }}
        >
          <div style={{ marginBottom: 16 }}>
            <Radio value="alipay" style={{ width: '100%' }}>
              <div style={{ display: "flex", alignItems: "center" }}>
                <AlipayOutlined style={{ fontSize: 24, color: "#1677ff", marginRight: 12 }} />
                <div>
                  <div style={{ fontWeight: 500 }}>支付宝</div>
                  <div style={{ fontSize: 12, color: "#999" }}>推荐支付宝用户使用</div>
                </div>
              </div>
            </Radio>
          </div>
          <div style={{ marginBottom: 16 }}>
            <Radio value="wechat" style={{ width: '100%' }}>
              <div style={{ display: "flex", alignItems: "center" }}>
                <WechatOutlined style={{ fontSize: 24, color: "#09bb07", marginRight: 12 }} />
                <div>
                  <div style={{ fontWeight: 500 }}>微信支付</div>
                  <div style={{ fontSize: 12, color: "#999" }}>推荐微信用户使用</div>
                </div>
              </div>
            </Radio>
          </div>
          <div>
            <Radio value="bank" style={{ width: '100%' }}>
              <div style={{ display: "flex", alignItems: "center" }}>
                <CreditCardOutlined style={{ fontSize: 24, color: "#722ed1", marginRight: 12 }} />
                <div>
                  <div style={{ fontWeight: 500 }}>银行卡支付</div>
                  <div style={{ fontSize: 12, color: "#999" }}>支持储蓄卡/信用卡</div>
                </div>
              </div>
            </Radio>
          </div>
        </Radio.Group>
      </Card>
      
      {/* 支付提示 */}
      <Alert
        message="支付提示"
        description="请在30分钟内完成支付，超时订单将自动取消"
        type="info"
        showIcon
        style={{ marginBottom: 24 }}
      />
      
      {/* 底部支付栏 */}
      <div style={{ 
        position: "fixed",
        bottom: isMobile ? 56 : 60,
        left: 0,
        right: 0,
        background: "#fff",
        padding: "12px 16px",
        borderTop: "1px solid #f0f0f0",
        boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.05)",
        zIndex: 100,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <div>
          <div style={{ fontWeight: "bold", fontSize: isMobile ? 16 : 18 }}>
            应付: <span style={{ color: "#ff4d4f" }}>¥{order.totalAmount !== undefined ? order.totalAmount.toFixed(2) : '0.00'}</span>
          </div>
        </div>
        <Button 
          type="primary" 
          danger 
          style={{ 
            width: isMobile ? 120 : 150,
            height: isMobile ? 40 : 48,
            fontWeight: "bold",
            fontSize: isMobile ? 14 : 16
          }}
          onClick={handlePay}
          loading={isPaying}
        >
          {isPaying ? "支付中..." : "立即支付"}
        </Button>
      </div>
    </div>
  );
};

export default PaymentPage;